  /**
   * id="title"  是文本输入框
   * id="donecount"  是已完成事件数量
   * id="todocount"  是正在进行的数量
   * id="todolist"  是ol，里面放小li来显示正在进行的事项
   * id="donelist"  是ul，里面放小li来显示已完成的事项
   * 一条事项的格式：
   *    <li><input type="checkbox"><p>今天好好学习</p> <a href="javascript:;"></a> </li>
   * 
   * 数据格式是数组：
   * const local = [
   *         {title:'今天也要好好学习' , done: false} , 
   *         {title:'明天也要好好学习' , done: false}
   *        ]
   */
  $(function () {
      //   $(window).on('keydown',function(e){
      //       console.log(e.keyCode)
      //   })

      showData()
      // 封装一个读取本地存储的数据函数
      function getData() {
          // 获取本地存储的数据
          const data = localStorage.getItem('todolist')
          // 不为空就是有数据，转为数组格式，返回出来
          if (data !== null) {
              return JSON.parse(data)
          } else {
              return []
          }
      }

      // 封装一个保存本地存储数据的函数,转为字符串形式进行保存
      function saveData(data) {
          localStorage.setItem('todolist', JSON.stringify(data))
      }

      // 封装一个渲染页面的函数
      function showData() {
          // 这两个用来统计正在进行和已完成数量
          var todoCount = 0
          var doneCount = 0
          // 先读取本地存储的数据
          const data = getData()
          // 遍历前清空ol里面的数据
          $('ol').empty()
          $('ul').empty()
          // 遍历这个数据
          $.each(data, function (index, dom) {
              if (dom.done) {
                  $('ul').prepend('<li><input type="checkbox" checked><p>' + dom.title + '</p> <a href="javascript:;" id=' + index + '></a> </li>');
                  doneCount++
              } else {
                  $('ol').prepend('<li><input type="checkbox"><p>' + dom.title + '</p> <a href="javascript:;" id=' + index + '></a> </li>');
                  todoCount++
              }
          })
          $('#todocount').text(todoCount)
          $('#donecount').text(doneCount)
      }

      // 1、添加数据：在文本框里，按下回车(13)，把数据放到localStorage里面
      $('#title').on('keydown', function (e) {
          if (e.keyCode == 13) {
              // 按下回车，读取本地存储的数据
              const local = getData()
              // 添加数据到local数组里面
              local.push({
                  title: $(this).val(),
                  done: false
              })
              $(this).val('') // 摁下回车也要清空文本框
              // 把local数组保存到本地存储
              saveData(local)
              showData()
          }
      })
      // 2、删除数据：点击小a，删除数组data中的这条数据，重新存到localStorage，渲染页面
      $('ol , ul').on('click', 'a', function () {
          const data = getData() // 获取本地存储的数据
          const index = $(this).attr('id') // 获取a的自定义属性，索引
          data.splice(index, 1) // 数组中删除这条数据
          saveData(data) // 数组保存到本地存储
          showData() // 重新刷新页面
      })

      // 3、点击复选框，修改数组中的done的值，修改后重新存储到本地存储，重新渲染页面
      // 渲染的时候，添加判断done的值，决定放在ol还是ul里面
      $('ol , ul').on('click', 'input', function () {
          const data = getData()
          const index = $(this).siblings('a').attr('id')
          //   console.log(typeof data);  是数组
          data[index].done = $(this).prop('checked')
          // console.log(data[index]);
          saveData(data)
          showData()
      })

  })